import { createApp } from 'vue';

import { createRouter , createWebHashHistory } from 'vue-router' ;

import App from './App.vue' ;
import Home from './components/Home.vue' ;
import News from './components/News.vue' ;
import Books from './components/Books.vue' ;
import Videos from './components/Videos.vue' ;
import Header from "./components/Header";
import SideBar from "./components/SideBar";
import Main from "./components/Main";
import SignIn from "./components/SignIn";
import Welcome from "./components/Welcome";
import List from "./components/List";
import Topic from "./components/Topic";

import 'bootstrap/dist/css/bootstrap.min.css' ;

const app = createApp(App);

const routes = [
    {
        path : '/' ,
        name: 'home' ,
        component: Home ,
        children: [
            { path: '/home' , components: { header: Header , sidebar: SideBar , main: Main} }
        ],
        meta: { title: '首页' }
    } ,
    { path : '/news/:id' , name: 'news' , component: News , meta: { title: '新闻' }} ,
    { path : '/books' , name: 'books' , component: Books , meta: { title: '图书' }} ,
    { path : '/videos/:id+' , name: 'videos' , component: Videos , meta: { title: '视频' }} ,
    { path : '/sign/in' , component: SignIn , meta: { title: '登录' } } ,
    {
        path : '/welcome' ,
        component: Welcome ,
        meta: { title: '欢迎' } ,
        beforeEnter: (to,from)=>{
            console.log( to , from );
            if( from.path == '/sign/in' && sessionStorage.getItem( 'user' ) ) {
                return true ;
            }
            return false ;
        }
    } ,
    { path : '/sign/out' , component: SignIn , meta: { title: '登录' } },
    { path : '/topic/list' , component: List , meta: { title: '话题列表' } } ,
    { path : '/topic/:id' , name: 'topic' , component: Topic , meta: { title: '话题详情' } , props: true }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});

// 全局前置守卫
router.beforeEach( (to,from)=> {
    console.log( 'to: ' , to );
    console.log( 'from: ' , from );
    return true ;
} );

// 全局后置钩子
router.afterEach( (to,from)=>{
    console.log( to , from );
    document.title = to.meta.title ;
});

app.use( router );

app.mount('#app');
